<template>
  <scroll-view scroll-y style="height: 100%">
    <view class='Kemu1-container'>
      <SearchInput :hot="hot" v-if="topBar.style !== 'custom'"></SearchInput>
      <view class="kaobuguo" v-if="kaobuguo && kemu === 1" @click="toKaobuguo">
      </view>
      <view :class="['carType', 'type'+carType]" v-if="carType===2||carType===3"
            @click="goTo('carType_'+carType)"></view>
      <template v-if="kemu===5">
        <view :class="['carType', 'type2_4']" v-if="carType===2"
              @click="goTo('carType2_4')"></view>
      </template>
      <view class="flex">
        <view class="small_icon_row">
          <view class="small_icon" @click="goTo('video_lesson')">
            <view class="icon item5"></view>
            <view class="label">视频课程</view>
          </view>
          <view class="small_icon" @click="goTo('toTag')">
            <view class="icon item6"></view>
            <view class="label">考点练习</view>
          </view>
          <view class="small_icon" @click="goTo('icon_category')">
            <view class="icon item7"></view>
            <view class="label">图标大全</view>
          </view>
          <view class="small_icon" @click="goTo('location_question')">
            <view class="icon item8"></view>
            <view class="label">地方题库</view>
          </view>
        </view>
        <view class="big_icon_row">
          <view class="big_icon item1" @click="goTo('shunxu')">
            <view class="big_icon_quan">
              <view class="icon">
                <view class="label">顺序练习</view>
                <view class="sub_label">{{ descFormat('shunxu') }}</view>
              </view>
            </view>
          </view>
          <view class="big_icon item2">
            <view class="big_icon_quan" @click="goTo('moni')">
              <view class="icon">
                <view class="label">模拟考试</view>
                <view class="sub_label">快速冲刺</view>
              </view>
            </view>
          </view>
        </view>
        <view class="small_icon_row">
          <view class="small_icon" @click="goTo('jingxuan', '精选题库')">
            <view class="icon item1"></view>
            <view class="label">精选500题</view>
          </view>
          <view class="small_icon" @click="goTo('mijuan')">
            <view class="icon item2"></view>
            <view class="label">考前密卷</view>
          </view>
          <view class="small_icon" @click="goTo('suji')">
            <view class="icon item3"></view>
            <view class="label">速记口诀</view>
          </view>
          <view class="small_icon" @click="goTo('kaochang_moni_enter')">
            <view class="icon item4"></view>
            <view class="label">真实考场模拟</view>
          </view>
        </view>
      </view>
      <view class="flex">
        <view class="jingxuan_container vip_enter2" @click="goTo('jingxuan', '精选题库')">
          <view class="main">精选500题</view>
          <view class="sub">历届考题精选题</view>
        </view>
        <view class="mijuan_container vip_enter2" @click="goTo('mijuan')">
          <view class="main">考前密卷</view>
          <view class="sub">直击考点 巩固强弱</view>
        </view>
      </view>
      <image src="https://down.qwdata.vip/app_icon/1702746533199" mode="widthFix" class="monikaochang"
             @click="goTo('kaochang_moni_enter')"></image>
      <VideoListView v-if="kemu ===1 && kemu1Videos && kemu1Videos.length > 0" :kemu="1" title="科一技巧考点"
                     @toDetail="toVideoDetail" :list="kemu1Videos"
                     @more="changeTab"/>
      <VideoListView v-if="kemu ===1 && kemu2Videos && kemu2Videos.length > 0" :kemu="2" title="科二视频详解"
                     @toDetail="toVideoDetail" :list="kemu2Videos"
                     @more="changeTab"/>
      <VideoListView v-if="kemu ===1 && kemu3Videos && kemu3Videos.length > 0" :kemu="3" title="科三难点解析"
                     @toDetail="toVideoDetail" :list="kemu3Videos"
                     @more="changeTab"/>
    </view>
  </scroll-view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import SearchInput from "@/pages/home/SearchInput.vue";
import VideoLessonView from "./VideoLessonView.vue";
import VideoListView from "@/pages/home/VideoListView.vue";
import {courseApi} from "@/api";

export default {
  name: 'Kemu1',
  props: ['hot', 'kemu'],
  components: {
    VideoListView,
    VideoLessonView,
    SearchInput
  },
  data() {
    return {
      kemu1Videos: [],
      kemu2Videos: [],
      kemu3Videos: [],
    }
  },
  computed: {
    ...mapGetters(['topBar', 'kaobuguo', 'carType', 'isAllVIP']),
    ...mapGetters('question', ['kemu1', 'kemu4'])
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const kemu2Id = 'QNW000001'
      const kemu3Id = 'QNW000002'
      const kemu1Id = 'QNW000003'

      let res = await courseApi.info(kemu1Id)
      this.kemu1Videos = res.data.data.contents
      res = await courseApi.info(kemu2Id)
      this.kemu2Videos = res.data.data.contents
      res = await courseApi.info(kemu3Id)
      this.kemu3Videos = res.data.data.contents
    },
    toKaobuguo() {
      uni.navigateTo({
        url: '/pages/kaobuguo/kaobuguo',
      });
    },
    descFormat(type) {
      const {
        wrongTotalCount = '-',
        collectTotalCount = '-',
        shunxuFinishedCount = '-',
        shunxuTotalCount = '-',
        huocheTotalCount,
        kecheTotalCount,
        tagCount = '-'
      } = this.kemu1;
      if (type === 'mine_wrong') {
        return '已收录' + wrongTotalCount + '道'
      }
      if (type === 'mine_collect') {
        return '已收录' + collectTotalCount + '道'
      }
      if (type === 'shunxu') {
        if (this.kemu === 1) {
          if (this.carType === 1) {
            return shunxuFinishedCount + '/' + shunxuTotalCount
          } else if (this.carType === 2) {
            return shunxuFinishedCount + '/' + (shunxuTotalCount + huocheTotalCount)
          } else if (this.carType === 3) {
            return shunxuFinishedCount + '/' + (shunxuTotalCount + kecheTotalCount)
          }
        } else if (this.kemu === 5) {
          if (this.carType === 2) {
            return shunxuFinishedCount + '/' + (shunxuTotalCount + huocheTotalCount + this.kemu4.huocheTotalCount)
          }
        }
      }
      if (type === 'kaodian') {
        return '共' + tagCount + '考点'
      }
    },
    toVideoDetail({courseId, id, kemu}) {
      if (kemu == '1') {
        return uni.navigateTo({
          url: '/pages/course_list/course_list?courseId=QNW000003'
        })
      }
      uni.navigateTo({
        url: '/pages/course_video/course_video?courseId=' + courseId + '&contentId=' + id + '&kemu=' + kemu
      })
    },
    changeTab(kemu) {
      let current = 0;
      if (kemu == '1') {
        return uni.navigateTo({
          url: '/pages/course_list/course_list?courseId=QNW000003'
        })
      } else if (kemu == '2') {
        current = 1
      } else if (kemu == '3') {
        current = 2
      }
      this.$emit('change', {detail: {current}})
    },
    goTo(type, title) {
      console.log('goTo', type)
      if (type === 'mine_collect') {
        uni.navigateTo({
          url: '/pages/mine_collect/mine_collect?kemu=1'
        });
      } else if (type === 'video_lesson') {
        uni.navigateTo({
          url: '/pages/course_list/course_list?courseId=QNW000003'
        });
      } else if (type === 'mine_wrong') {
        uni.navigateTo({
          url: '/pages/mine_wrong/mine_wrong?kemu=1'
        });
      } else if (type === 'toTag') {
        uni.navigateTo({
          url: '/pages/tag/tag?kemu=1'
        });
      } else if (type === 'moni') {
        uni.navigateTo({
          url: '/pages/exam_start/exam_start?kemu=1'
        });
      } else if (type === 'shunxu') {
        const isManFen = this.kemu === 5 ? 1 : 0;
        uni.navigateTo({
          url: '/pages/lianxi_start/lianxi_start?kemu=1&type=shunxu&title=顺序练习'+ '&isManfen=' + isManFen,
        });
      } else if (type === 'suji') {
        uni.navigateTo({
          url: '/pages/shorthand/shorthand?kemu=1'
        })
      } else if (type === 'location_question') {
        uni.navigateTo({
          url: '/pages/location_question/location_question?kemu=1'
        })
      } else if (type === 'kaochang_moni_enter') {
        uni.navigateTo({
          url: '/pages/kaochang_moni_enter/kaochang_moni_enter?kemu=1'
        })
      } else if (type === 'icon_category') {
        uni.navigateTo({
          url: '/pages/icon_category/icon_category?kemu=1'
        })
      } else if (type === 'mijuan') {
        uni.navigateTo({
          url: '/pages/mijuan/mijuan?kemu=1'
        })
      } else if (type === 'pdf_detail') {
        uni.navigateTo({
          url: '/pages/pdf_detail/pdf_detail?id=C000008'
        })
      } else if (type === 'carType_2') {
        uni.navigateTo({
          url: '/pages/detail/detail?kemu=1&type=' + type + '&title=货运练习',
        });
      } else if (type === 'carType2_4') {
        uni.navigateTo({
          url: '/pages/detail/detail?kemu=4&type=carType_2&title=货运资格证专题&isManfen=true',
        });
      } else if (type === 'carType_3') {
        uni.navigateTo({
          url: '/pages/detail/detail?kemu=1&type=' + type + '&title=客运练习',
        });
      } else {
        uni.navigateTo({
          url: '/pages/detail/detail?kemu=1&type=' + type + '&title=' + title,
        });
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.Kemu1-container {
  padding-bottom: 100rpx;
  padding-top: 1px;

  .kaobuguo {
    height: 160rpx;
    color: #fff;
    //background-color: #007aff;
    margin: 25rpx 36rpx 0 36rpx;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-image: url("http://down.qwdata.vip/app_icon/1705066907825");
    margin-bottom: 10rpx;
  }

  .carType {
    height: 162rpx;
    color: #fff;
    //background-color: #007aff;
    margin: 25rpx 36rpx 0 36rpx;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    border-radius: 30rpx;

    &.type2 {
      background-image: url("@/static/carType/carType2.png");
    }

    &.type2_4 {
      background-image: url("http://down.qwdata.vip/app_icon/1715321894921");
    }

    &.type3 {
      background-image: url("@/static/carType/carType3.png");
    }
  }

  .big_icon_row {
    display: flex;
    flex-direction: column;

    .big_icon {
      display: flex;
      justify-content: center;
      align-items: center;

      &.item1 {
        flex: 1;

        .big_icon_quan {
          border: 16rpx solid #E7EBFF;
        }

        .icon {
          background: linear-gradient(142deg, #6381FD 0%, #3F63F8 100%);
        }
      }

      &.item2 {
        flex: 1;

        .big_icon_quan {
          border: 16rpx solid #D2FFEF;
        }

        .icon {
          background: linear-gradient(145deg, #0EE398 0%, #00C580 100%);
        }
      }

      .big_icon_quan {
        width: 220rpx;
        height: 220rpx;
        border-radius: 200rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 10rpx solid #007aff;
      }

      .icon {
        width: 195rpx;
        height: 195rpx;
        border-radius: 200rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;

        .label {
          font-weight: bold;
        }

        .sub_label {
          font-size: 13px;
          margin-top: 8rpx;
          opacity: 0.9;
        }
      }
    }
  }

  .small_icon_row {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;

    .small_icon {
      width: 180rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        width: 100rpx;
        height: 112rpx;
        background-size: cover;
        margin-top: 20rpx;

        &.item1 {
          background-image: url("@/static/home/icon_jingxuan.png");
        }

        &.item2 {
          background-image: url("@/static/home/icon_mijuan.png");
        }

        &.item3 {
          background-image: url("@/static/home/icon_koujue.png");
        }

        &.item4 {
          background-image: url("@/static/home/icon_zhenshi.png");
        }

        &.item5 {
          background-image: url("@/static/home/icon_shipin.png");
        }

        &.item6 {
          background-image: url("@/static/home/icon_kaodian.png");
        }

        &.item7 {
          background-image: url("@/static/home/icon_tubiao.png");
        }

        &.item8 {
          background-image: url("@/static/home/icon_difangti.png");
        }
      }

      .label {
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
        margin-bottom: 20rpx;
      }
    }
  }

  .vip_enter2 {
    width: 333rpx;
    height: 248rpx;
    background-size: cover;

    .main {
      margin-left: 24rpx;
      margin-top: 24rpx;
      font-weight: bold;
      font-size: 32rpx;
    }

    .sub {
      margin-left: 24rpx;
      margin-top: 12rpx;
      font-size: 24rpx;
    }

    &.jingxuan_container {
      margin-left: 32rpx;
      background-image: url("@/static/home/jingxuan_bg.png");
      color: rgba(28, 100, 168, 1);

      .sub {
        color: rgba(82, 138, 191, 1);
      }
    }

    &.mijuan_container {
      margin-left: 20rpx;
      color: rgba(112, 41, 20, 1);
      background-image: url("@/static/home/mijuan_bg.png");

      .sub {
        color: rgba(155, 119, 109, 1);
      }
    }
  }

  .monikaochang {
    margin-left: 32upx;
    margin-top: 25upx;
    width: calc(100vw - 64upx);
  }

  .item {
    margin: 25rpx 36rpx 0 36rpx;

    &:first-child {
      margin-top: 25rpx;
    }

    .item-title {
      color: rgb(255, 140, 79);
      font-weight: bold;
      font-size: 38rpx;
      margin-bottom: 15rpx;
    }

    .item-container {
      .corner {
        position: absolute;
        // right: 0rpx;
        // width:110rpx;
        // height: 46rpx;
      }

      .vip-icon {
        width: 72rpx;
        align-self: flex-end;
        height: 20rpx;
      }

      .issue-icon {
        width: 110rpx;
        height: 20rpx;
      }

      .left-container {
        background-color: rgba(24, 208, 192, 1);
        border-radius: 24rpx;
        width: 304rpx;
        height: 304rpx;
        margin-right: 16rpx;

        .left-top {
          margin: 36rpx 0 0 36rpx;

          .left_title {
            margin-bottom: 5rpx;
            font-size: 36rpx;
            font-weight: bold;
            color: #fff;
          }

          .left_desc {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
          }
        }

        .left_btn {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 34rpx;
          height: 68rpx;
          width: 164rpx;
          margin: 0 0 32rpx 30rpx;
          font-size: 26rpx;
          font-weight: bold;
        }
      }

      .right-container {
        flex: 1;

        .vip {
          position: absolute;
          right: 0;
          top: 0;
          background: #201C1B;
          border-radius: 0 20rpx 0 15rpx;
          font-size: 12px;
          color: #f9d9be;
          padding: 8rpx 20rpx;
        }

        .daan {
          background-image: linear-gradient(130deg, #fff5ea 0%, #e8dbb4 100%);
        }

        .miji {
          background-image: linear-gradient(130deg, #cedefb 0%, #8dc2fc 100%);

          .title {
            color: rgba(0, 0, 0, 0.8);
            font-weight: bold;
          }

          .desc {
            color: rgba(0, 0, 0, 0.7);
          }
        }

        .jingxuan {
          background-image: linear-gradient(130deg, #f9d9be 0%, #d29877 100%);

          .title {
            color: #591e0c;
            font-weight: bold;
          }

          .desc {
            color: #712b16;
          }
        }

        .right-box {
          flex: 1;
          padding-left: 26rpx;
          border-radius: 24rpx;
          position: relative;
        }

        .right-box-top {
          margin-bottom: 16rpx;
        }

        .title {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 12rpx;
          color: rgba(36, 40, 61, 1);
        }

        .desc {
          font-size: 13px;
          margin-bottom: 12rpx;
          color: rgba(63, 76, 97, 0.9);
        }
      }
    }
  }
}
</style>
